/*
 * Copyright (c) 2023 MariaDB plc
 *
 * Use of this software is governed by the Business Source License included
 * in the LICENSE.TXT file and at www.mariadb.com/bsl11.
 *
 * Change Date: 2028-05-14
 *
 * On the date above, in accordance with the Business Source License, use
 * of this software will be governed by version 2 or later of the General
 * Public License.
 */

$colors: (
  'primary': colors.$primary,
  'accent': colors.$accent,
  'anchor': colors.$anchor,
  'text': colors.$text,
  'small-text': colors.$small-text,
  'text-subtle': colors.$text-subtle,
  'navigation': colors.$navigation,
  'code-color': colors.$code-color,
  'success': colors.$success,
  'error': colors.$error,
  'warning': colors.$warning,
  'info': colors.$info,
  'alert': colors.$alert,
  'notice': colors.$notice,
  'debug': colors.$debug,
  'separator': colors.$separator,
  'grayed-out': colors.$grayed-out,
  'table-border': colors.$table-border,
  'tr-hovered-color': colors.$tr-hovered-color,
  'selected-tr-color': colors.$selected-tr-color,
  'deep-ocean': colors.$deep-ocean,
  'blue-azure': colors.$blue-azure,
  'electric-ele': colors.$electric-ele,
);

@mixin gen-cascade-class($property, $value) {
  .#{$property}--#{$value} {
    #{$property}: $value !important;
  }
  .#{$property}--#{$value}--all {
    #{$property}: $value !important;
    * {
      #{$property}: $value !important;
    }
  }
}

@mixin border-utility($label, $value) {
  .border--#{$label} {
    border: thin solid $value !important;
  }
  .border-color--#{$label} {
    border-color: $value !important;
  }
  .border-top--#{$label} {
    border-top: thin solid $value !important;
  }
  .border-right--#{$label} {
    border-right: thin solid $value !important;
  }
  .border-bottom--#{$label} {
    border-bottom: thin solid $value !important;
  }
  .border-left--#{$label} {
    border-left: thin solid $value !important;
  }
}

@mixin gen-non-border-class($properties) {
  @each $property in $properties {
    .#{$property}--none {
      #{$property}: none !important;
    }
  }
}

@each $label, $value in $colors {
  @include border-utility($label, $value);
}
@include gen-non-border-class((border, border-top, border-right, border-bottom, border-left));

@include gen-cascade-class(cursor, default);
@include gen-cascade-class(cursor, pointer);
@include gen-cascade-class(cursor, move);
@include gen-cascade-class(cursor, grab);
@include gen-cascade-class(cursor, text);
@include gen-cascade-class(cursor, crosshair);
@include gen-cascade-class(user-select, none);
@include gen-cascade-class(pointer-events, none);

.cursor--wait {
  cursor: wait !important;
  z-index: 1;
  user-select: none !important;
  * {
    z-index: 0 !important;
    user-select: none !important;
    pointer-events: none !important;
  }
}

.anchor-link {
  text-decoration: none !important;
  color: colors.$primary;
  &:hover {
    text-decoration: underline !important;
  }
}

.grayed-out-info {
  padding-left: 2px;
  font-size: 14px;
  color: colors.$grayed-out;
}

.shadow-drop {
  box-shadow: rgba(0, 0, 0, 0.4) 0 0 5px !important;
}

.pos--relative {
  position: relative !important;
}

.pos--absolute {
  position: absolute !important;
}

.label--required::after {
  content: ' *';
  color: colors.$error;
  font-size: 0.75rem;
  @extend .pos--relative;
  font-weight: 500;
  font-family: vuetifyVar.$heading-font-family;
}

.dragging-mask {
  @extend .pos--absolute;
  z-index: 9999;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.toolbar-square-btn {
  min-width: unset !important;
  padding: 0px !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 0px !important;
  &:hover {
    border-radius: 0px !important;
  }
}

.rotate {
  &-left {
    transform: rotate(90deg);
  }
  &-up {
    transform: rotate(180deg);
  }
  &-right {
    transform: rotate(-90deg);
  }
  &-down {
    transform: rotate(0deg);
  }
}

.tbl-code {
  width: 100%;
  background-color: colors.$separator;
  td {
    color: colors.$code-color;
    vertical-align: top;
    padding-bottom: 4px;
    width: auto;
    &:first-of-type {
      width: 1px;
      padding-right: 16px;
    }
  }
}

.label-field {
  font-size: 0.75rem !important;
  display: inline-block;
  margin-bottom: 4px;
  &::first-letter {
    text-transform: uppercase;
  }
}
